import React, { PureComponent } from 'react';
import { Popover, Form, Radio, Typography, Icon, Divider } from 'antd';
import { withRemove } from './index';
import FileUpload from '@/components/FileUpload';
import styles from './index.less';

const { Text } = Typography;

@withRemove
class ImageComponent extends PureComponent {
  constructor(props) {
    super(props);
    const content = props.data.content || [{ key: '', url: '' }];
    this.state = {
      src: content[0].url,
      full: props.data.full || '',
    };
  }

  handleImage = (url, key) => {
    const { data } = { ...this.props };
    data.content = [{ url, key }];
    this.props.onChange(data);
    this.setState({ src: url });
  };

  handleType = e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    data.full = value;
    this.props.onChange(data);
    this.setState({ full: value });
  };

  render() {
    const { src, full } = this.state;
    return (
      <Popover
        placement="right"
        trigger="click"
        content={
          <>
            <Form.Item
              label="图片上传"
              className={styles.mb0}
              extra="只能上传 jpg/png 文件，且不超过 500kb"
            >
              <FileUpload src={src} onChange={this.handleImage} fileSize={0.5} />
            </Form.Item>
            <Form.Item label="展示类型" className={styles.mb0}>
              <Radio.Group value={full} onChange={this.handleType}>
                <Radio value="">两边留白</Radio>
                <Radio value="full">两边铺满</Radio>
              </Radio.Group>
            </Form.Item>
          </>
        }
      >
        {src ? (
          <div>
            <Divider>
              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                图片组件，{full === 'full' ? '两边铺满' : '两边留白'}
              </Typography.Text>
            </Divider>
            <img
              src={src}
              alt={full === 'full' ? '两边铺满' : '两边留白'}
              style={{ width: '100%', padding: full === 'full' ? 0 : '0 15px' }}
            />
          </div>
        ) : (
          <Typography>
            <Text type="secondary">
              这里编辑图片
              <Icon type="file-image" theme="twoTone" />
            </Text>
          </Typography>
        )}
      </Popover>
    );
  }
}

export default ImageComponent;
